<template>
	<view class="flex-col item-center p-8 radius-12 bg-white">
		<view class="flex center"><text class="fs-12 color-primary text-bold leading-22 mb-4">已有{{enrolledNum}}人报名</text></view>
		<view class="flex center" style="flex-direction:row-reverse;" :style="{'margin-left':showAvatars &&showAvatars.length>=2?`${-((showAvatars.length-1)*12)}px`:''}">
			<image v-for="(item,i) in showAvatars" :key="i" class="cu-avatar round size-24 box-content" style="border:0.5px solid #FFF;" :style="`transform:translateX(${i * 10}px);`" :src="item" />
		</view>
	</view>
</template>

<script setup name="Sign-Up-People">
	import { computed } from 'vue'
	// 显示已报名人数，显示前6个报名者的头像
	const props = defineProps({
		enrolledNum: {
			type: [Number, String],
			default: 0
		},
		enrolledAvatars: {
			type: Array,
			default: []
		},
		maxLength: {
			type: Number,
			default: 6
		}
	})
	
	const showAvatars = computed(() => {
		return props.enrolledAvatars.filter((_,i) => i < props.maxLength).reverse()
	})
</script>
